<template>
  <div class="login">
    <div class="login-icon">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wangyiyunyinle"></use>
      </svg>
    </div>
    <div class="login-panel">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="用户名"
          label="手机号"
          placeholder="用户名"
          ref="uphone"
          :rules="rules.phone"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          ref="pwd"
          :rules="rules.password"
        />
        <div class="login-btn">
          <van-button block native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  import { getLoginInfo,getUserDetail } from '../../api/login'
  import Bus from '../../common/js/bus'
  import { mapMutations } from 'vuex';
  import { Toast } from 'vant'

  export default {
    data() {
      return {
        phone:'',
        password:'',
        imageUrl:'',
        loginTxt:'立即登录 >',
        userId:'',
        isLogin: false,
        rules:{
          phone:[ 
            { require: true, message: '请填写手机号' },
            { pattern: /^1[34578]\d{9}$/, message: '请填写正确的手机号' }
          ],
          password: [
            { require: true,message: '请输入密码' },
            { pattern: /^[A-Z0-9]{3,}$/,  message: '密码必须是3位以上的字母或者数字' }
          ]
        },
      }
    },

    mounted:function(){
      // console.log(this.$cookies);
      let cookie = this.$session.getItem('cookie');
      // console.log(token);
      if(cookie){
        Toast.success('登录成功');
        this.$router.back();
      }else{
        this.$session.clear();
      }
    },

    methods:{
      onSubmit(){
        this.phone = this.$refs.uphone.value;
        this.password = this.$refs.pwd.value;
        getLoginInfo(this.phone, this.password).then((res) => {
          // if(res.data.code === 200){
          console.log(res);
          this.$session.setItem('phone', this.phone);
          this.$session.setItem('password', this.password);
          this.$session.setItem('cookie', res.cookie);
          this.$session.setItem('profile', res.profile);
          // }
        }).catch((error) => {
          console.log(error);
        })
        this.$router.back();
      },
    }
  }
</script>

<style scoped>
.login{
  position: relative;
  height: 667px;
  width: 100%;
  background: rgb(212, 68, 57);
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-icon{
  position: absolute;
  top:20%
}

.icon{
  width: 100px;
  height: 100px;
  color: #fff;
  background: red;
  border-radius: 100%;
}

.login-panel button{
  background-color:  rgb(212, 68, 57);
  color:#fff;
  margin-top: 20px;
}
</style>